@( user: User)

@main(user) {

    <style>
            body {
            margin: 0px;
            padding: 0px;
            }
            #myCanvas {
            border: 1px solid #9C9898;
            background: url(/public/images/island2.png);
            }
    </style>
        <canvas id="myCanvas" width="500" height="500"></canvas>
        <p class="place"></p>
        <p class="place2"></p>
        <script type="text/javascript">
                $(document).ready( function() {
                var canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('2d');
                var shape;
                var syslurArr = []; //array heldur utan um staðsetningu sýslna

                var Sysla = function(x,y){
                    this.x = x;
                    this.y = y;
                }

                syslurArr.push(new Sysla(330, 208));



                // Teiknar á canvasinn úr fylkinu
                var draw = function ( ctx, cnvs, x, y) {
                ctx.clearRect(0, 0, cnvs.width, cnvs.height);
                ctx.beginPath();
                var radius = 10;                    // The arc radius.
                var startAngle = 0;                     // The starting point on the circle.
                var endAngle = Math.PI + (Math.PI * 2) / 2; // The end point on the circle.
                ctx.arc(x, y-47, radius, startAngle, endAngle, true); // Create the arc path.
                ctx.stroke();                               // Display the work.
                $('.place').html(x);
                $('.place2').html(y-47);
                };

                var rettSysla = function(x,y){
                    var sysl = syslurArr[0];
                    var ex = sysl.x - x;
                    var iy = sysl.y - y;
                    if(  (ex > (sysl.x-50) || ex < (sysl.x+50)) &&  )
                };


                $("#myCanvas").click( function(e){
                    rettSysla(e.pageX, e.pageY);
                    draw(ctx, canvas, e.pageX, e.pageY);
                });

                });
        </script>

}